<h5>Borderless</h5>
<div class="p-notification--caution is-borderless">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
</div>

<h5>Borderless inline</h5>
<div class="p-notification--caution is-borderless is-inline">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title:</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
</div>

<h5>Dismissible</h5>
<div class="p-notification" id="notification">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
    <button
      aria-controls="notification"
      aria-label="Close notification"
      class="p-notification__close"
    >
      Close
    </button>
  </div>
</div>

<h5>Multiline</h5>
<div class="p-notification--negative">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title:</h5>
    <p class="p-notification__message">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat pretium facilisis. Phasellus cursus neque vel elementum pharetra. Cras maximus neque non mi fermentum, vel ultrices sem rutrum. Aliquam ornare nulla et justo fermentum tincidunt. Duis in enim nec velit consequat sollicitudin ac eget arcu. Proin id leo nunc. Donec varius sem et mattis cursus.
    </p>
  </div>
</div>

<h5>Inline multiline</h5>
<div class="p-notification--caution is-inline">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title:</h5>
    <p class="p-notification__message">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat pretium facilisis. Phasellus cursus neque vel elementum pharetra. Cras maximus neque non mi fermentum, vel ultrices sem rutrum. Aliquam ornare nulla et justo fermentum tincidunt. Duis in enim nec velit consequat sollicitudin ac eget arcu. Proin id leo nunc. Donec varius sem et mattis cursus.
    </p>
  </div>
</div>

<h5>Meta - Action buttons</h5>
<div class="p-notification">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
  <div class="p-notification__meta">
    <div class="p-notification__actions">
      <a href="#" class="p-notification__action">Cancel</a>
      <a href="#" class="p-notification__action">Confirm</a>
    </div>
  </div>
</div>

<h5>Meta - Action links</h5>
<div class="p-notification">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
    <button class="p-notification__close">Close</button>
  </div>
  <div class="p-notification__meta">
    <div class="p-notification__actions">
      <a class="p-notification__action">Link 1</a>
      <a class="p-notification__action">Link 2</a>
    </div>
  </div>
</div>

<h5>Meta - Date</h5>
<div class="p-notification">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
  <div class="p-notification__meta">
    <span class="p-notification__timestamp">1h ago</span>
  </div>
</div>

<h5>Meta - Date + action buttons</h5>
<div class="p-notification">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
  <div class="p-notification__meta">
    <span class="p-notification__timestamp">1h ago</span>
    <div class="p-notification__actions">
      <a href="#" class="p-notification__action">Cancel</a>
      <a href="#" class="p-notification__action">Confirm</a>
    </div>
  </div>
</div>

<h5>Meta - Date + action links</h5>
<div class="p-notification">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
  <div class="p-notification__meta">
    <span class="p-notification__timestamp">1h ago</span>
    <div class="p-notification__actions">
      <a href="#" class="p-notification__action">Link 1</a>
      <a href="#" class="p-notification__action">Link 2</a>
    </div>
  </div>
</div>

<h5>No title</h5>
<div class="p-notification">
  <div class="p-notification__content">
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
</div>

<h5>Spacing</h5>
<div class="p-notification">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
</div>
<div class="p-notification">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
</div>
<div class="p-notification is-borderless">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
</div>
<div class="p-notification is-borderless">
  <div class="p-notification__content">
    <h5 class="p-notification__title">Title</h5>
    <p class="p-notification__message">
      Body lorem ipsum dolor sit amet consequiteor. Lorem ipsum dolor sit amet consequiteor.
    </p>
  </div>
</div>

<script>
  /**
    Attaches event listener for hide notification on close button click.
    @param {HTMLElement} closeButton The notification close button element.
  */
  function setupCloseButton(closeButton) {
    closeButton.addEventListener('click', function(event) {
      var target = event.target.getAttribute('aria-controls');
      var notification = document.getElementById(target);

      if (notification) {
        notification.classList.add('u-hide');
      }
    });
  }

  // Set up all notification close buttons.
  var closeButtons = document.querySelectorAll('.p-notification__close');

  for (var i = 0, l = closeButtons.length; i < l; i++) {
    setupCloseButton(closeButtons[i]);
  }
</script>
